<template>
  <div>
    <!-- @click="$router.push('/userInfo').catch(() => {}) -->
    <!-- 头部导航 -->
    <div class="header">
      <div class="left iconfont icon-caidan" @click="showPopup"></div>
     <!-- 菜单弹出页 -->
      <van-popup
        v-model="show"
        position="left"
        :style="{ height: '100%', width: '70%' }"
      >
        <div class="Side">
          <div class="userinfo_head"  @click="$router.push('/userInfo').catch(() => {})">
            <div class="user_header">
              <img :src="profile.avatarUrl" />
            </div>
            <div class="userinfo_name">
              <span>{{ profile.nickname }}</span>
              <i class="left iconfont icon-caidan_yijicaidan_icon_gengduo"></i>
            </div>
            <div class="userinfo_text">
              <!-- <i class="iconfont icon-caidan1"></i> -->
              <van-icon name="scan" />
            </div>
          </div>
          <div class="blackVip">
            <div class="userName">
              <div class="topVIp">
                <p class="vip">黑胶霸王vip</p>
                <p class="vip-a">拥有超21项专属特权</p>
              </div>
              <div class="botVIP">会员中心</div>
            </div>
            <div class="time">
              黑积分of不容个人个人不够二维
              <span class="pin">拼</span>
            </div>
          </div>

          <div class="table">
            <ul>
              <li>
                <span class="iconfont icon-xiaoxi1"></span>
                <div class="info">
                  我的消息
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
              <li>
                <span class="iconfont icon-yunbeiguanli"></span>
                <div class="info">
                  云贝中心
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
              <li>
                <span class="iconfont icon-dengpao"></span>
                <div class="info">
                  创作者中心
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
            </ul>
          </div>

          <div class="table2">
            <ul>
              <li>
                <div class="info"><p>消息服务</p></div>
              </li>
              <li>
                <span class="iconfont icon-tianmaohuopiaotongxing"></span>
                <div class="info">
                  云村有票
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
              <li>
                <span class="iconfont icon-gouwuche1"></span>
                <div class="info">
                  商城
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
              <li>
                <span class="iconfont icon-youxiyule"></span>
                <div class="info">
                  游戏专区
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
              <li>
                <span class="iconfont icon-cailing"></span>
                <div class="info">
                  口袋彩铃
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
            </ul>
          </div>

          <div class="table3">
            <ul>
              <li>
                <div class="info"><p>其他</p></div>
              </li>
              <li>
                <span class="iconfont icon-shezhi3"></span>
                <div class="info">
                  设置
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
              <li>
                <span class="iconfont icon-yueduye-yejianmoshi"></span>
                <div class="info">
                  夜间模式
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
              <li>
                <span class="iconfont icon-danchuang_dingshiguanbi_"></span>
                <div class="info">
                  定时关闭
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
              <li>
                <span class="iconfont icon-gexingzhuangban2"></span>
                <div class="info">
                  个性装扮
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
              <li>
                <span class="iconfont icon-huaban"></span>
                <div class="info">
                  边听边存
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
              <li>
                <span class="iconfont icon-naozhong2"></span>
                <div class="info">
                  音乐闹钟
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>

              <li>
                <span class="iconfont icon-zaixiantinggemianliuliang"></span>
                <div class="info">
                  在线听歌免流量
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>

              <li>
                <span class="iconfont icon-heimingdan2"></span>
                <div class="info">
                  音乐黑名单
                  <span class="iconfonticon-CZ_003u"></span>
                </div>
              </li>
            </ul>
          </div>

          <div class="table4">
            <ul>
              <li>
                <span class="iconfont icon-dingdan1"></span>
                <div class="info">
                  我的订单
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
              <li>
                <span class="iconfont icon-Coupon"></span>
                <div class="info">
                  优惠券
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
              <li>
                <span class="iconfont icon-icon7"></span>
                <div class="info">
                  帮助与反馈
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
              <li>
                <span class="iconfont icon-guanyu1"></span>
                <div class="info">
                  关于
                  <span class="iconfont icon-CZ_003"></span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </van-popup>

      <div class="center">MUSIC-VUE</div>
      <router-link
        tag="div"
        to="/search"
        class="right iconfont icon-search1"
      ></router-link>
    </div>
    <router-view></router-view>
    <!-- 导航按钮 -->
    <div class="navs">
      <router-link tag="div" to="/recommend" class="item">
        <span>推荐</span>
      </router-link>
      <router-link tag="div" to="/rank" class="item">
        <span>排行榜</span>
      </router-link>
      <router-link tag="div" to="/singer" class="item">
        <span>歌手</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import { getDetail, getSubcount } from "../../api/user";
export default {
  data() {
    return {
      show: false, //是否弹出
      profile: [], //账号信息
      uid: "", //账号uid
      level: null, //等级,
      checked: true,
    };
  },
  methods: {
    //弹出层
    showPopup() {
      this.show = true;
    },
    //获取用户详情
    getDetailFun() {
      getDetail({ uid: window.localStorage.uid }).then((data) => {
        console.log(data);
        console.log(data.level);
        this.level = data.level;
        this.profile = data.profile;
        console.log(this.profile);
        console.log(this.profile.backgroundUrl); //背景图
        console.log(this.profile.nickname); //名字
        console.log(window.localStorage.uid); //id
      });
    },
    //获取用户信息 , 歌单，收藏，mv, dj 数量
    getSubcountFun() {
      getSubcount({ uid: window.localStorage.uid }).then((data) => {
        console.log(data);
      });
    },
  },
  created() {
    //页面加载完成后调用
    this.getDetailFun(); //获取用户详情
    this.getSubcountFun(); //获取用户信息 , 歌单，收藏，mv, dj 数量
    //  this.getRecordFun(); //最近播放
  },
};
</script>

<style lang="less">
* {
  margin: 0px;
  padding: 0px;
}
.header {
  background-color: #d44439;
  color: #fff;
  height: 39px;
  line-height: 39px;
  display: flex;
  text-align: center;
  .left,
  .right {
    flex: 0 0 40px;
    font-size: 18px;
  }
  .center {
    flex: 1;
  }
  .Side {
    color: black;
    .userinfo_head {
      margin: 0 auto;
      width: 90%;
      height: 30px;
      // border: 1px solid red;
      //  background-color: rgba(260, 260, 260 );
      border-radius: 15px;
      margin-top: 30px;
      position: relative;
      .user_header {
        width: 30px;
        height: 30px;
        // border: 1px solid red;
        border-radius: 50%;
        position: absolute;
        top: 0px;
        left: 0px;
        background-size: cover;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }
      .userinfo_name {
        position: absolute;
        left: 18%;
        font-weight: 500;
        font-size: 14px;
        line-height: 30px;
        color: rgba(53, 53, 53);
        .left {
          font-size: 12px;
          line-height: 30px;
          font-weight: 600;
          padding-left: 5px;
        }
      }
      .userinfo_text {
        position: absolute;
        font-size: 20px;
        text-align: center;
        line-height: 30px;
        right: 5%;
        padding-left: 5px;
        font-weight: 600;
      }
    }

    .blackVip {
      width: 76%;
      margin: 0 auto;
      background-image: linear-gradient(90deg, #8c8c8c, #b6b6b6);
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      border-radius: 13px;
      margin-top: 23px;
      line-height: normal;
      padding: 0px 18px;

      .userName {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        .topVIp {
          text-align: left;
          height: 50px;
          margin-top: 17px;
          .vip {
            color: #f1f1f1;
            font-size: 14px;
          }
          .vip-a {
            color: #cacaca;
            font-size: 12px;
          }
        }

        .botVIP {
          font-size: 12px;
          color: #f3f3f3;
          border: 1px solid #fff;
          border-radius: 13px;
          padding: 3px 8px;
          line-height: 12px;
        }
      }

      .time {
        line-height: 38px;
        font-size: 12px;
        color: #cecece;
        text-align: left;
        .pin {
          font-size: 20px;
          color: #ece4c4;
          float: right;
        }
      }
    }

    .table {
      width: 90%;
      // height: 136px;
      margin: 0 auto;
      margin-top: 18px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      border-radius: 5px;

      ul {
        padding-left: 15px;
        padding-right: 15px;

        li {
          display: flex;
          height: 40px;
          padding-top: 13px;
          .info {
            width: 100%;
            padding-left: 10px;
            text-align: left;

            span {
              float: right;
            }
          }
        }
      }
    }

    .table2 {
      width: 90%;
      // height: 136px;
      margin: 0 auto;
      margin-top: 18px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      ul {
        padding-left: 15px;
        padding-right: 15px;

        li {
          display: flex;
          height: 40px;
          padding-top: 13px;
          .info {
            width: 100%;
            padding-left: 10px;
            text-align: left;
            span {
              float: right;
            }
            p {
              float: left;
              font-size: 9px;
              color: #8c8c8c;
            }
          }
        }
      }
    }

    .table3 {
      width: 90%;
      // height: 136px;
      margin: 0 auto;
      margin-top: 18px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      ul {
        padding-left: 15px;
        padding-right: 15px;
        li {
          display: flex;
          height: 40px;
          padding-top: 13px;
          .info {
            width: 100%;
            padding-left: 10px;
            text-align: left;

            span {
              float: right;
            }
            p {
              float: left;
              font-size: 9px;
              color: #8c8c8c;
            }
          }
        }
      }
    }

    .table4 {
      width: 90%;
      // height: 136px;
      margin: 0 auto;
      margin-top: 18px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      ul {
        padding-left: 15px;
        padding-right: 15px;

        li {
          display: flex;
          height: 40px;
          padding-top: 13px;
          .info {
            width: 100%;
            padding-left: 10px;
            text-align: left;
            span {
              float: right;
            }
            p {
              float: left;
              font-size: 9px;
              color: #8c8c8c;
            }
          }
        }
      }
    }

    // .vipbox {
    //   margin: 0 auto;
    //   width: 90%;
    //   height: 30px;
    //   .vip {
    //     background: rgba(154, 154, 154);
    //     border-radius: 15px;
    //     padding: 10px;
    //     .up{
    //       display: flex;
    //       .up-left{
    //         h3{
    //            color: #fff;
    //            font-size: 12px;
    //         }
    //         p{
    //           color: rgba(186, 186, 186);
    //         }

    //       }
    //     }
    //   }

    //   // border: 1px solid red;
    //   //  background-color: rgba(260, 260, 260 );

    //   margin-top: 30px;
    //   position: relative;
    // }
  }
}
.navs {
  height: 40px;
  line-height: 40px;
  display: flex;
  background-color: #d44439;
  color: #fff;
  .item {
    flex: 1;
    text-align: center;
    font-size: 14px;
    span {
      display: inline-block;
      height: 21px;
      line-height: 21px;
      border-bottom: 1px solid transparent;
    }
    &.router-link-active span {
      border-color: #fff;
      font-weight: bold;
    }
  }
}
</style>